<template>
    <div class="vacaManage">
        <div class="ibox-title">
            <h5>员工假期</h5>
            <div class="ibox-tools">
                <!--<a  class="dh"><i class="fa fa-chevron-up"  v-on:click="toggle"></i></a>
                          
                          <a ><i class="fa fa-times"></i></a>-->
            </div>
        </div>
        <div class="ibox-centent">
            <div class="row">
                <div class="search">
                    <span>输入姓名</span>
                    <el-input placeholder="请姓名、编号查询" v-model="name" class="wi">
                    </el-input>
                    <span>选择年份</span>

                    <el-date-picker
                        v-model="years"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleDate"
                        placeholder="选择年份">
                    </el-date-picker>
                    <el-button slot="append" @click="searchData">查询</el-button>
                </div>
                <div class="search" v-loading.fullscreen.lock="fullscreenLoading">
                    <!--<a class="btn" :href="downloadUrl">
                        <i class="fa fa-external-link"></i>导出今年员工假期
                    </a>-->
                   
                    <a class="btn" :href="downloadUrl">
                        <i class="fa fa-external-link"></i>导出模版
                    </a> 

                    <el-upload class="upload-con" :data="urlDataImport" :action="uploadUrl" :on-progress="handlePreview" :on-remove="handleRemove" :limit="1" :on-success="handleSuccess">
                        <el-button size="small" type="primary"><i class="fa fa-sign-in"></i>批量导入数据</el-button>
                    </el-upload>
                    

                   
                    <!--<el-upload class="upload-con" :data="urlLeaveData" :action="urlLeaveDataImport" :on-preview="handlePreview" :on-remove="handleRemove" :limit="1" :on-success="handleLeaveSuccess">
                        <el-button size="small" type="primary"><i class="fa fa-sign-in"></i>年份假期导入</el-button>
                    </el-upload>                    -->
                    
                    <a class="btn" @click="calcImport">
                        <i class="fa fa-external-link"></i>年份假期计算
                    </a> 
                    
                    <a class="btn" @click="add">
                        <i class="fa fa-plus"></i>新增
                    </a>

                </div>
                <div class="tt">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="index" label="序号" min-width="40">
                            <template scope="scope">
                                <span>{{(currentPage-1)*pageSizeTable+(scope.$index+1)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column property="name" label="姓名" min-width="80">

                        </el-table-column>
                        <el-table-column property="emplid" label="员工编号" min-width="100">
                        </el-table-column>
                        <el-table-column property="leaveType" label="假期类型" width="80">
                        </el-table-column>
                        <el-table-column property="years" label="年份" min-width="70">

                        </el-table-column>
                        <el-table-column property="sumDays" label="假期总天数" min-width="90">
                        </el-table-column>
                        <el-table-column property="restDays" label="假期剩余天数" min-width="90">
                        </el-table-column>
                        <el-table-column property="startDt" label="有效开始时间" min-width="90">
                        </el-table-column>
                        <el-table-column property="endDt" label="有效结束时间" min-width="90">
                        </el-table-column>
                        <el-table-column property="createName" label="创建人">
                        </el-table-column>                      
                        <el-table-column label="操作" min-width="100">
                            <template scope="scope">

                                <a class="modifyBtn" @click="modify(scope.row)">
                                    <i class="fa fa-edit"></i>修改
                                </a>
                                <span  style="cursor:pointer" class="delete" @click="deletePeo(scope.row)" title="删除">
                                    <a >
                                        <i class="fa fa-remove"></i>
                                    </a>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>

            <div class="block">
                <span class="displayShow">共 {{totalNum}} 条记录</span>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10,20,50,100, 200]" :page-size.sync="pageSizeTable" layout="sizes,prev, pager, next" :total="totalNum">

                </el-pagination>
            </div>

        </div>
        
        <el-dialog 
            title="确认上传"
            :fullscreen="full"
            size='large'
            :visible.sync="dialogTableVisible">
                <el-table :data="importData" style="width: 100%" height="500">
                    <el-table-column type="index" label="序号" min-width="40" >
                        <template scope="scope">
                            <span>{{(currentPage-1)*pageSizeTable+(scope.$index+1)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="name" label="姓名" min-width="80">

                    </el-table-column>
                    <el-table-column property="emplid" label="员工编号" min-width="100">
                    </el-table-column>
                    <el-table-column property="leaveType" label="假期类型" width="80">
                    </el-table-column>
                    <el-table-column property="years" label="年份" min-width="100">
                        <template scope="scope">
                            <el-date-picker
                                v-model="scope.row.years"
                                type="year"
                                format="yyyy"
                                @change="handleUploadYear(scope,'years')"
                                placeholder="选择日期">
                            </el-date-picker>
                        </template>

                    </el-table-column>
                    <el-table-column  label="假期总天数" min-width="130">
                        <template scope="scope">
                            <el-input v-model.trim="scope.row.sumDays" @change="handleSumDays(scope)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column  label="假期剩余天数" min-width="130">
                        <template scope="scope">
                            <el-input v-model.trim="scope.row.restDays" @change="handleRestDays(scope)" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column property="startDt" label="有效开始时间" min-width="130">
                        <template scope="scope">
                            <el-date-picker
                                v-model="scope.row.startDt"
                                type="date"
                                @change="handleUploadEndDt(scope,'startDt')"
                                placeholder="选择日期">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column property="endDt" label="有效结束时间" min-width="130">
                        <template scope="scope">
                            <el-date-picker
                                v-model="scope.row.endDt"
                                type="date"
                                @change="handleUploadEndDt(scope,'endDt')"
                                placeholder="选择日期">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column property="create_name" label="创建人">
                    </el-table-column>
                    <el-table-column property="remark" label="提示信息">
                        <template scope="scope">
                            <span :style="{'color':(scope.row.remark?'red':'')}">{{scope.row.remark ?scope.row.remark : '正常'  }}</span>
                        </template>
                    </el-table-column>  
                    <el-table-column property="" label="操作">
                        <template scope="scope">
                            <span class="delete" @click="DeleteImport(scope)" title="删除">
                                <a>
                                    <i class="fa fa-remove"></i>
                                </a>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmImportYearLeave">确 定</el-button>
            </span>
        </el-dialog>



        <el-dialog title="导入年份假期" :lock-scroll='lockFalse' :visible.sync="dialogImportVisible" >
            <el-form :model="form">
                <el-form-item label="休假名称" :label-width="formLabelWidth">
                	<el-date-picker
                        v-model="importDefaultYear"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleImportDate"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogImportVisible = false">取 消</el-button>
                <a class="confirmExportYear" :href="exportLeaveYearsUrl">确定导出</a>
            </div>
        </el-dialog>




<!--:inline="true" :model="formInline" :model="form"-->
        <el-dialog title="年份假期计算"  class='calcDialog' size="large" :lock-scroll='lockFalse' :visible.sync="dialogYearVisible">
            <!--<el-form  :inline="true" :model="form"  class="demo-form-inline" >

                <el-form-item label="假期类型" :label-width="formLabelWidth">
            	  	<el-select v-model="calc.calcLeaveType" placeholder="请选择">
					    <el-option
					      v-for="item in leaveTypeList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
                </el-form-item>
                <el-form-item label="选择年份" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="calc.calcDate"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleCalcDate"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="选择类型搜索" :label-width="formLabelWidth">
					<template scope="scope">
						  <el-radio class="radio" v-model="radio" label="1">部门查询</el-radio>
						  <el-radio class="radio" v-model="radio" label="2">员工编号查询</el-radio>
					</template>
                </el-form-item>
                				
                <el-form-item label="选择部门" v-if="radio === '1'"  :label-width="formLabelWidth">
                	<div><i @click="calcDeptSearch" class="fa fa-search deptSearchIcon" ></i></div>
					<div>
						<el-tag
						  v-for="tag in tags"
						  :key="tag.id"
		
						  :close-transition="false"
						  @close="handleClose(tag)"
						  type="success"
						>
						{{tag.descr}}
						</el-tag>
					</div>
                </el-form-item>  
                <el-form-item label="员工编号" v-if="radio === '2'" :label-width="formLabelWidth">
					<template scope="scope">
						<el-input v-model.trim="calc.emplid" auto-complete="off"></el-input>
					</template>
                </el-form-item>                
                <el-form-item label="" :label-width="formLabelWidth">
					<el-button type="primary" class="calcSearchBtn" @click="confirmCalcSearch">查 询</el-button>
                </el-form-item>  

            </el-form>
            -->
            
            <el-form  :inline="true" :model="form"  class="demo-form-inline" >

                <el-form-item label="假期类型" :label-width="formLabelWidth">
            	  	<el-select v-model="calc.calcLeaveType" placeholder="请选择">
					    <el-option
					      v-for="item in leaveTypeList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
                </el-form-item>
                <el-form-item label="选择年份" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="calc.calcDate"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleCalcDate"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                
                <!--<el-form-item label="选择类型搜索" :label-width="formLabelWidth">
					<template scope="scope">
						  <el-radio class="radio" v-model="radio" label="1">部门查询</el-radio>
						  <el-radio class="radio" v-model="radio" label="2">员工编号查询</el-radio>
					</template>
                </el-form-item>-->
                				
                <el-form-item label="选择部门" class="deptSelect"  v-if="radio === '1'"  :label-width="formLabelWidth">
                	<div>
                		<i @click="calcDeptSearch" class="fa fa-search deptSearchIcon" ></i>
                	</div>
					<div>
						<el-tag
						  v-for="tag in tags"
						  :key="tag.id"
		
						  :close-transition="false"
						  @close="handleClose(tag)"
						  type="success"
						>
						{{tag.descr}}
						</el-tag>
					</div>

                </el-form-item>  
                <el-form-item label="员工编号" class="deptSelect"  v-if="radio === '2'" :label-width="formLabelWidth">
					<template scope="scope">
						<el-input v-model.trim="calc.emplid" auto-complete="off"></el-input>
					</template>
                </el-form-item>
                <el-form-item class="deptSelect1"  :label-width="formLabelWidth">
					<template scope="scope">
					    <el-radio class="radio" v-model="radio" label="1">部门查询</el-radio>
						<el-radio class="radio" v-model="radio" label="2">员工编号查询</el-radio>
					</template>
                </el-form-item>

                <el-form-item label="" class="deptSelect2" :label-width="formLabelWidth">
					<el-button type="primary" class="calcSearchBtn" @click="confirmCalcSearch">查 询</el-button>
                </el-form-item>  

            </el-form>            
            

            
            
            
			<div v-if="tableCalcData && tableCalcData.length>0">
				<div class="tableCalcContainer">
		        	<el-table height="620" :data="tableCalcData" style="width: 100%">
		                <el-table-column type="index" label="序号" min-width="40">
		                    <template scope="scope">
		                        <span>{{(currentPage-1)*pageSizeTable+(scope.$index+1)}}</span>
		                    </template>
		                </el-table-column>
		                <el-table-column property="name" label="姓名" min-width="80">
		                	<!--<template scope = 'scope'>
		                		<el-input v-model="tableCalcDataSave[scope.$index].name" auto-complete="off"></el-input>
		                	</template>	-->
		                </el-table-column>
		                <el-table-column property="emplid" label="员工编号" min-width="100">
		                	<!--<template scope = 'scope'>
		                		<el-input v-model="scope.row.emplid" auto-complete="off"></el-input>
		                	</template>-->
		                </el-table-column>
		                <el-table-column property="leaveType" label="假期类型" width="120">
		                	<!--<template scope = 'scope'>
								<el-select v-model="scope.row.leaveType" placeholder="请选择">
								    <el-option
								      v-for="item in leaveTypeList"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
								 </el-select>
		                	</template>-->
		                </el-table-column>
		                <el-table-column property="years" label="年份" min-width="120">
		                	<!--<template scope="scope">
			                    <el-date-picker
			                        v-model="scope.row.years"
			                        type="year"
			                        value-format="yyyy"
			                        format="yyyy"
			                        @change="handleCalcDate"
			                        placeholder="选择年份">
			                    </el-date-picker>
		                	</template>-->
		
		                </el-table-column>
		                <el-table-column property="sumDays" label="假期总天数" min-width="90">
		                	<template scope = 'scope'>
		                		<el-input v-model="tableCalcDataSave[scope.$index].sumDays" auto-complete="off"></el-input>
		                	</template>
		                </el-table-column>

		                <el-table-column property="startDt" label="有效开始时间" min-width="120">
		                    
		                    <!--<template scope="scope">
			            		<el-date-picker
			            			:editable='addEdit'
			                        v-model="scope.row.startDt"
			                        type="date"
			                        value-format="yyyy-MM-dd"
			                        format="yyyy-MM-dd"
			                        @change="handleCalcTime(scope,'startDt')"
			                        placeholder="选择年份">
			                    </el-date-picker>	                        
		                    </template>-->
	
		                </el-table-column>
		                <el-table-column property="endDt" label="有效结束时间" min-width="120">
		                    <!--<template scope="scope">
			            		<el-date-picker
			            			:editable='addEdit'
			                        v-model="scope.row.endDt"
			                        type="date"
			                        @change="handleCalcTime(scope,'endDt')"
			                        value-format="yyyy-MM-dd"
			                        format="yyyy-MM-dd"
			                        placeholder="选择年份">
			                    </el-date-picker>	                        
		                    </template>-->
		                </el-table-column>
		                <!--<el-table-column property="create_name" label="创建人">
		                </el-table-column>                      -->
	
		            </el-table>
		            
				</div>
	            <!--<div class="block">
	                <span class="displayShow">共 {{totalNum}} 条记录</span>
	                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10,20,50,100, 200]" :page-size.sync="pageSizeTable" layout="sizes,prev, pager, next" :total="totalNum">
	
	                </el-pagination>
	            </div>-->
	            
	            <div slot="footer" class="dialog-footer">
	            	<el-button type="primary" @click="dialogYearVisible = false">取消</el-button>
	                <el-button type="primary" @click="confirmCalcSave">确认保存</el-button>
	            </div>
			</div>

        </el-dialog>

         <el-dialog 
          title="部门选择"
           :visible.sync="DepartmentDialogVisible"
           :lock-scroll=false
           top='5vh'
            >
   

            <section class="tree" ref='departmentTree'>

				<halo-tree  ref="deptSearchTree" type="Group" class="lt widthTree"></halo-tree>

            </section>

             <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveDeptChecked">确认</el-button>
                <el-button @click="DepartmentDialogVisible=false">取 消</el-button>
             </span>
    
        </el-dialog>






        <el-dialog title="新增" :lock-scroll='lockFalse' :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工编号" :label-width="formLabelWidth">
                    <el-input v-model="form.emplid" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="假期类型" :label-width="formLabelWidth">
                    <!-- <select class="select" v-model="form.leaveType" placeholder="请选择假期类型">
                        <option label="年假" value="1">年假</option>
                        <option label="有薪病假" value="2">有薪病假</option>
                        <option label="全薪病假" value="3">全薪病假</option>
                    </select> -->
            	  	<el-select v-model="form.leaveType" placeholder="请选择假期类型">
					    <el-option
					      v-for="item in leaveTypeList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
                    
                </el-form-item>
                <el-form-item label="年份选择" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.years"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleAddDate"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                

                <el-form-item label="假期总天数" :label-width="formLabelWidth">
                    <el-input v-model="form.sumDays"  auto-complete="off"></el-input>
                </el-form-item>
                <!--<el-form-item label="假期剩余天数" :label-width="formLabelWidth">
                    <el-input v-model="form.restDays"  auto-complete="off"></el-input>
                </el-form-item>-->

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :lock-scroll="lockFalse" title="修改" :visible.sync="dialogModifyVisible">
            <el-form :model="modifyForm">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input disabled v-model="modifyForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工编号" :label-width="formLabelWidth">
                    <el-input v-model="modifyForm.emplid" disabled auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="假期类型" :label-width="formLabelWidth">
                    <!-- <select class="select" disabled v-model="modifyForm.leave_type" placeholder="请选择假期类型">
                        <option label="年假" value="1">年假</option>
                        <option label="有薪病假" value="2">有薪病假</option>
                        <option label="全薪病假" value="3">全薪病假</option>
                    </select> -->

            	  	<el-select  disabled v-model="modifyForm.leaveType" placeholder="请选择假期类型">
					    <el-option
					      v-for="item in leaveTypeList"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
                </el-form-item>
                <el-form-item label="年份" :label-width="formLabelWidth">
                    <el-date-picker
                        disabled
                        v-model="modifyForm.years"
                        type="year"
                        value-format="yyyy"
                        format="yyyy"
                        @change="handleYearModi"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="假期总天数" :label-width="formLabelWidth">
                    <el-input v-model="modifyForm.sumDays"  auto-complete="off"></el-input>
                </el-form-item>
                <!--<el-form-item label="假期剩余天数" :label-width="formLabelWidth">
                    <el-input v-model="modifyForm.rest_days"  auto-complete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="有效开始时间" :label-width="formLabelWidth">
                    <el-date-picker
                       
                        v-model="modifyForm.startDt"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        @change="handleDateModiStart"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="有效结束时间" :label-width="formLabelWidth">
                     <el-date-picker
                       
                        v-model="modifyForm.endDt"
                        type="date"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        @change="handleDateModiEnd"
                        placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                <!--<el-form-item label="创建人" :label-width="formLabelWidth">
                    <el-input v-model="modifyForm.create_name" disabled auto-complete="off"></el-input>
                </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogModifyVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmModify">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//import 'Mock/mock_data'
import Vue from 'vue'
import {
	Input,
	Table,
	TableColumn,
	Upload,
	Tag,
	Radio,
	Pagination,
	Dialog,
	Form,
	FormItem,
	Select,
	Option,
	DatePicker,
	MessageBox,
	Message,
	Loading,
} from 'element-ui'


Vue.use(Input)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Upload)
Vue.use(Form)
Vue.use(Tag)
Vue.use(Radio)
Vue.use(FormItem)
Vue.use(DatePicker)
Vue.use(Select)
Vue.use(Option)
Vue.use(Loading)

import haloTree from '@/components/router-component/treeDept'
// import cardLeader from "@/components/card-leader";
// import searchBox from "@/components/search-box";
// import adminUrl from "@/common/js/adminUrl";
// import CxoDialog from "@/components/userManager/dialog/CxoDialog";
// import BusinessDialog from "@/components/userManager/dialog/BusinessDialog";
// import DepartmentDialog from "@/components/userManager/dialog/DepartmentDialog";
// import HeadquartersDialog from "@/components/userManager/dialog/HeadquartersDialog";
// import RoleDialog from "@/components/userManager/dialog/RoleDialog";
export default {
	components: {
		// CxoDialog,
		// BusinessDialog,
		// DepartmentDialog,
		// HeadquartersDialog,
		// RoleDialog
		'halo-tree': haloTree
	},
	data () {
		return {

			tableData: [],
			currentPage: 1,
			pageSizeTable: 20,
			totalNum: 0,
			name: '',
			years: '',
			yearsList: ['2016', '2017'],
			urlDataImport: {
				token: localStorage.getItem('token')
			},
			lockFalse: false,
			//数据导入start
			dialogTableVisible: false,
			importData: [],
			importSaveData: [],
			date: '2017-11-20',
			full: true,
			//数据导入end

			//年份假期计算
			dialogYearVisible: false,
			calc: {
				calcLeaveType: '1',
				calcDate: new Date().getFullYear() + '',
				calcDept: '',
				calcDateChange: new Date().getFullYear() + '',
				emplid: '',
			},
			tableCalcData: [],
			tableCalcDataSave: [],
			tags: [

			],
			radio: '1',
			DepartmentDialogVisible: false,
			defaultValue: '',
			defaultChecked: '',
			defaultProps: {
				children: 'childList',
				label: 'descr'
			},
			deptCalcTreeData: [],
			defaultCheckDeptId: '',
			tableCalcContainerShow: false,
			//

			fullscreenLoading: false,

			//创建 start
			dialogFormVisible: false,
			form: {
				name: '',
				regionType: '内地',
				emplid: '',
				leaveType: '1',
				years: null,
				sumDays: '',
				restDays: '',
			},


			leaveTypeList: [{
				value: '1',
				label: '年假'
			}, {
				value: '2',
				label: '有薪病假'
			}, {
				value: '3',
				label: '全薪病假'
			}],

			modifyForm: {},
			formLabelWidth: '120px',
			//创建 end

			dialogImportVisible: false,
			importDefaultYear: new Date().getFullYear().toString(),
			importDefaultYearLeave: new Date().getFullYear().toString(),
			rigionArea: [{
				value: '1',
				label: '内地'
			}, {
				value: '2',
				label: '香港'
			}],
			importRegion: '1',

			dialogModifyVisible: false,
		}
	},
	watch: {
		dialogYearVisible: function (newVal, oldVal) {
			if (newVal) {
				this.tableCalcData = []
				this.tags = []
			}
		}
	},
	computed: {
		downloadUrl: function () {
			return this.Axios.baseURI + this.URL.exportModel.url + '?token=' + localStorage.getItem('token')
		},
		uploadUrl: function () {
			return this.Axios.baseURI + this.URL.leaveManagerImport.url
		},
		exportLeaveYearsUrl: function () {
			return this.Axios.baseURI + this.URL.exportLeaveYears.url + '?token=' + localStorage.getItem('token') + '&years=' + this.importDefaultYearLeave//+'&regionType='+this.importRegion;
		},
		urlLeaveDataImport: function () {
			return this.Axios.baseURI + this.URL.leaveByempExport.url + '?token=' + localStorage.getItem('token')
		}
	},
	mounted: function () {
		this.getLeaveList()


		//      this.getDept();
	},
	methods: {

		getDept: function () {
			var params = {
				depid: '',
			}
			this.Axios.Post(this.URL.leaveBydeptAuth.url, params).then(res => {
				this.deptCalcTreeData = res.data.datas.showDept
				console.log(res, 'getDept')
			})
		},

		// type===2 代表简表请求
		handleSizeChange (val) {
			this.currentPage = 1
			this.pageSizeTable = val
			this.getLeaveList()
			// this.getLeaderListCommonAjax(2);            
		},
		handleCurrentChange (val) {
			// console.log(this.currentPage);
			this.currentPage = val
			this.getLeaveList()
			// this.getLeaderListCommonAjax(2); 
		},


		//年份假期导入
		handleImportDate: function (val) {
			this.importDefaultYearLeave = val
			console.log(val)
		},
		confirmImportYearLeave: function () {

		},

		handleLeaveSuccess (response, files, fileList) {

			console.log(response, 'response')
			if (response.datas && response.datas.path) {
				var params = {
					path: response.datas.path,
					fileName: response.datas.fileName,
				}

			} else if (response.status == 1) {
				Message({
					message: '导入成功',
					type: 'success'
				})
				this.getLeaveList()
			} else if (response.status == 500) {
				Message({
					message: '系统错误',
					type: 'success'
				})
			}

			//          this.Axios.Get('/excelImport/download',params)
			//              .then(res=>{
			//					console.log('下载成功');                 
			//              })
			//          this.importData = response.datas;
			//          this.importSaveData = JSON.parse(JSON.stringify(this.importData));
			//          this.dialogTableVisible = true;
		},
		//查询start
		importLeave: function () {

			this.dialogImportVisible = true
		},
		clearData: function () {
			this.currentPage = 1
		},
		searchData: function () {
			this.clearData()
			this.getLeaveList()
		},
		handleDate: function (val) {
			this.years = val
			console.log(val)
		},
		//查询end


		//年份假期计算

		calcImport: function () {

			this.dialogYearVisible = true
		},
		handleCalcDate: function (val) {
			this.calc.calcDateChange = val
		},
		confirmCalcSearch: function () {

			var deptIds = []
			this.tags.forEach(function (val) {
				deptIds.push(val.deptid)
			})

			if (this.radio === '1' && deptIds.length < 1) {
				Message({
					message: '至少选择一个部门',
					type: 'warning'
				})
				return
			} else if (this.radio === '2' && !this.calc.emplid) {
				Message({
					message: '请输入员工id',
					type: 'warning'
				})
				return
			}

			if (this.radio === '1') {
				this.calc.emplid = ''
			} else {
				deptIds = ''
			}

			var params = {
				year: this.calc.calcDateChange,
				leaveType: this.calc.calcLeaveType,
				deptids: deptIds && deptIds.join(','),
				emplid: this.calc.emplid
			}

			this.Axios.Post(this.URL.leaveCalculationBylist.url, params).then(res => {
				this.tableCalcData = res.data.datas
				if (!this.tableCalcData || !this.tableCalcData.length) {
					Message({
						message: '查询无数据',
						type: 'warning'
					})
					return
				}
				this.tableCalcDataSave = JSON.parse(JSON.stringify(this.tableCalcData))

			})
		},

		confirmCalcSave: function () {
			var params = {
				leaves: this.tableCalcDataSave
			}
			var self = this
			this.Axios.Post(this.URL.batchAddleaveManeger.url, params).then(res => {
				if (res.data.status === 1) {
					Message({
						message: res.data.message,
						type: 'success'
					})
					setTimeout(function () {
						MessageBox.confirm('是否继续年份假期计算, 是否继续?', '确认', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {

						}).catch(() => {

							self.getLeaveList()
							self.dialogYearVisible = false
						})
					}, 1000)




				}

			})

		},

		calcDeptSearch: function () {
			this.DepartmentDialogVisible = true
		},

		handleCalcTime: function (val, type) {
			if (!val.row[type]) { return }
			console.log(val.row.endDt)
			var date = new Date(val.row[type])
			var year = date.getFullYear()
			var Month = date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
			var date = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()

			this.tableCalcData[val.$index][type] = year + '-' + Month + '-' + date

			this.tableCalcDataSave[val.$index][type] = year + '-' + Month + '-' + date

		},

		saveDeptChecked: function () {
			this.tags = this.$refs.deptSearchTree.$refs.tree.getSelectedNodes()
			this.DepartmentDialogVisible = false
			console.log(this.tags, 'this.tags')
		},
		//



		//新增
		confirmAdd: function () {
			this.postAddAjax(this.URL.editLeaveaManager.url).then(res => {
				if (res.data.status === 1) {
					this.dialogFormVisible = false
					Message({
						message: res.data.message,
						type: 'success'
					})
					this.getLeaveList()
				}
			})
		},
		checkNumber: function (theObj) {
			var reg = /^\d+(\.\d+)?$/
			if (reg.test(theObj)) {
				return true
			}
			return false
		},
		postAddAjax: function (url, params) {

			if (!this.checkNumber(this.form.sumDays)) {
				Message({
					message: '假期总天数必须为数字',
					type: 'warning'
				})
				return
			}

			//			if (!this.checkNumber(this.form.restDays)) {
			//              Message({
			//                  message: "假期剩余天数必须为数字",
			//                  type: 'warning'
			//              });	
			//              return;
			//			}			
			if (!this.form.years) {
				Message({
					message: '年份不能为空',
					type: 'warning'
				})
				return
			}

			if (!this.form.name) {
				Message({
					message: '姓名不能为空',
					type: 'warning'
				})
				return
			}

			var params = {
				name: this.form.name,
				emplid: this.form.emplid,
				leaveType: this.form.leaveType,
				sumDays: this.form.sumDays,
				years: this.form.years
			}
			return this.Axios.Post(url, params)
		},
		handleAddDate: function (val) {
			this.form.years = val
		},
		//

		//
		deletePeo: function (row) {
			console.log(row, 'row')
			MessageBox.confirm('是否删除?', '确认', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deleteAjax(row.id)
			}).catch(() => {

			})

		},
		deleteAjax: function (id) {
			var params = {
				id: id
			}
			this.postAjax(this.URL.deleteLeaveManage.url, params)
				.then(res => {
					if (res.data.status === 1) {
						Message({
							message: res.data.message,
							type: 'success'
						})
						this.getLeaveList()
					}
				})
		},
		//

		//修改
		modify: function (row) {
			console.log(row)
			this.modifyForm = JSON.parse(JSON.stringify(row))
			this.modifyForm.end_dt = this.modifyForm.endDt;
			this.modifyForm.start_dt = this.modifyForm.startDt;
			this.dialogModifyVisible = true
		},
		handleYearModi: function (val) {
			console.log(val)
			this.modifyForm.years = val
		},
		handleDateModiEnd: function (val) {
			console.log(val)
			this.modifyForm.end_dt = val
		},
		handleDateModiStart: function (val) {
			console.log(val)
			this.modifyForm.start_dt = val
		},

		handleLeaveType: function (typeStr) {
			return typeStr == '年假' ? '1' : (typeStr == '有薪病假' ? '2' : '1')
		},

		confirmModify: function () {

			if (!this.checkNumber(this.modifyForm.sumDays)) {
				Message({
					message: '假期总天数必须为数字',
					type: 'warning'
				})
				return
			}
			if (!this.modifyForm.start_dt || !this.modifyForm.end_dt) {
					Message({
						message: '开始时间和结束时间必填',
						type: 'warning'
					})
					return
			}


			var params = {
				id: this.modifyForm.id,
				emplid: this.modifyForm.emplid,
				name: this.modifyForm.name,
				leaveType: this.modifyForm.leaveType,
				years: this.modifyForm.years,
				sumDays: this.modifyForm.sumDays,
				restDays: this.modifyForm.restDays,
				startDt: this.modifyForm.start_dt,
				endDt: this.modifyForm.end_dt
			}

			this.postAjax(this.URL.editLeaveaManager.url, params)
				.then(res => {
					this.dialogModifyVisible = false
					if (res.data.status === 1) {
						Message({
							message: res.data.message,
							type: 'success'
						})
						this.getLeaveList()
					}
				})
		},
		//

		//导入
		confirmImport: function () {
			this.importSaveData.forEach(function (val, index) {
				val.token = localStorage.getItem('token')
			})
			var params = this.importSaveData

			MessageBox.confirm('错误列将不会导入, 是否继续?', '确认提交', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.postAjax(this.URL.leLeaveaByhandbatch.url, params)
					.then(res => {
						this.dialogTableVisible = false
						if (res.data.status == 1) {
							Message({
								message: res.data.message,
								type: 'success'
							})
							this.getLeaveList()
						}
					})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消导入'
				})
			})

		},
		//


		postAjax: function (url, params) {
			return this.Axios.Post(url, params)
		},
		getLeaveList: function () {
			var params = {
				years: this.years,
				pageNo: this.currentPage,
				pageSize: this.pageSizeTable,
				name: this.name
			}
			this.postAjax(this.URL.getLeaveaManagerBylist.url, params)
				.then(res => {
					this.tableData = res.data.datas
					this.totalNum = res.data.total
				})
		},
		confirmSubmit: function () {

		},
		add: function () {
			this.dialogFormVisible = true
		},
		handleRemove (file, fileList) {
			console.log(file, fileList)
		},
		handlePreview (file) {
			this.fullscreenLoading = true
			console.log(file)
		},
		handleSuccess (response, files, fileList) {
			this.fullscreenLoading = false
			console.log(response, 'response')
			if (response.datas && response.datas.path) {
				Message({
					message: response.message,
					type: 'warning'
				})


			} else if (response.status == 1) {
				Message({
					message: '导入成功',
					type: 'success'
				})
				this.getLeaveList()
			} else if (response.status == 500) {
				Message({
					message: '系统错误',
					type: 'success'
				})
			}

			//          this.Axios.Get('/excelImport/download',params)
			//              .then(res=>{
			//					console.log('下载成功');                 
			//              })
			//          this.importData = response.datas;
			//          this.importSaveData = JSON.parse(JSON.stringify(this.importData));
			//          this.dialogTableVisible = true;
		},
		handleUploadEndDt: function (val, type) {
			if (!val.row[type]) { return }
			console.log(val.row.endDt)
			var date = new Date(val.row[type])
			var year = date.getFullYear()
			var Month = date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
			var date = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
			this.importData[val.$index][type] = year + '-' + Month + '-' + date
			this.importSaveData[val.$index][type] = year + '-' + Month + '-' + date

		},

		handleUploadYear: function (scope, type) {
			if (!scope.row[type]) { return }
			var date = new Date(scope.row[type])
			var year = date.getFullYear()
			this.importSaveData[scope.$index][type] = year
		},
		handleSumDays: function (scope) {
			this.importSaveData[scope.$index]['sumDays'] = scope.row['sumDays']
		},
		handleRestDays: function (scope) {
			this.importSaveData[scope.$index]['restDays'] = scope.row['restDays']
		},
		DeleteImport: function (scope) {
			this.importData.splice(scope.$index, 1)
			this.importSaveData.splice(scope.$index, 1)
		}

	},

	beforeDestroy: function () {

	}
}
</script>

<style scoped>
.dialog {
  background-color: #fff;
  padding: 100px;
}
.vacaManage .confirmExportYear {
  float: right;
  width: 80px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  background-color: #0066cc;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  margin-left: 5px;
}

.vacaManage .calcSearchBtn {
  width: 140px;
}

.vacaManage .first-title h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.vacaManage .select {
  height: 36px;
  width: 100%;
  border: 1px solid #bfcbd9;
}
.vacaManage .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
}

.deg-contain {
  border: 1px solid #8391a5;
  min-height: 60px;
  border-radius: 6px;
}

.content-right {
  float: right;
  margin-top: 17px;
}

.vacaManage .select-dept {
  font-size: 14px;
}

.vacaManage .display-title {
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
}

.vacaManage .switch-btn {
  padding: 10px 10px;
}

.vacaManage .collapse-card {
  padding: 10px 10px;
  border-bottom: 1px solid #f4f4f4;
}

.vacaManage .third-card {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #3c8dbc;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.vacaManage .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}

.vacaManage .third-card .collapse-card .box-title .box-header > .box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}

.vacaManage .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}

/*content*/

.vacaManage {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}

.ibox-title {
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  color: #6c6a6c;
  padding: 15px 15px 7px;
  min-height: 48px;
}

.ibox-title h5 {
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: left;
}

.ibox-tools {
  display: block;
  float: none;
  margin-top: 0;
  position: relative;
  padding: 0;
  text-align: right;
}

.ibox-tools a {
  cursor: pointer;
  margin-left: 5px;
  color: #c4c4c4;
}

/*ibox-centent*/

.ibox-centent {
  padding: 20px 10px 40px;
  clear: both;
  background-color: #ffffff;
  color: inherit;
  min-height: 500px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}

.row {
  margin-right: -10px;
  margin-left: -10px;
}

.row .tt {
  padding: 0 30px;
}

.row .search {
  width: 100%;
  margin-bottom: 15px;
  height: 44px;
  line-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

.row .search span {
  margin: auto 5px;
}

.row .search button {
  margin: auto 5px;
}
.row .search .upload-con {
  margin-left: 10px;
}

.row .search .btn {
  height: 34px;
  line-height: 34px;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: #18a689;
  border-radius: 5px;
  padding: 5px;
  min-width: 60px;
  margin-left: 20px;
}
.modifyBtn {
  height: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: #18a689;
  border-radius: 5px;
  padding: 4px;
  cursor: pointer;
}

.row .search .btn i {
  margin-right: 2px;
}

.row .search .btn:first-child {
  margin-left: 20px;
}

.row .search .btn:hover {
  background-color: #ccc;
  color: #000;
  cursor: pointer;
}

.row .search .wi {
  width: 20%;
}

.el-button {
  background: #1ab394;
  border: 1px solid #1ab394;
  color: #fff;
}

.search-l {
  width: 33.3333333%;
  margin-bottom: 5px;
}

.el-button .r {
  width: 66.66666667%;
}

.el-input-group__append .el-button {
  background: #1ab394;
  color: #fff;
  border: 1px solid #1ab394;
}

/*table*/

.el-table__header-wrapper thead div {
  background-color: #fff;
  color: #1f2d3d;
}

.btn-sp {
  padding-left: -10px;
}

.btn-sp > a {
  border: 1px solid #23c6c8;
  background: #23c6c8;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}

.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}

.delete > a {
  border: 1px solid #ec4758;
  background: #ec4758;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin-top: 5px;
}

.el-pagination {
  margin-top: 20px;
}

/*角色授权*/

.modal-content {
  background-clip: padding-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: 0 none;
  position: relative;
}

.modal-header .close {
  margin-top: -2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: black;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: 0.2;
}

.modal-title {
  margin: 0;
  line-height: 1.42857143;
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 600;
  font-size: 14px;
}

.modal-body {
  padding: 20px 30px 30px 30px;
  position: relative;
}

.el-dialog__body {
  color: #48576a;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
}

.input {
  border: none;
}

.input:focus {
  border: none;
  outline: none;
}

.title-modify {
  height: 40px;
  line-height: 40px;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

.modal-footer {
  margin-top: 0;
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

.btn-primary {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #ffffff;
  padding: 8px 13px;
  border-radius: 3px;
  border: 1px solid #1ab394;
  outline: none;
  cursor: pointer;
  font-size: 14px;
}

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
  padding: 8px 13px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  font-size: 14px;
}

/* .btn-default {
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
} */

.glyphicon {
  position: relative;
  top: 3px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*图标*/

.glyphicon-off:before {
  content: '\e017';
}

.vacaManage .displayShow {
  display: inline-block;
  height: 32px;
}

.vacaManage .block {
  margin: 15px 5px;
  line-height: 32px;
}

.vacaManage .block > div {
  display: inline-block;
}
</style>
<style>
/*修改element-ui样式*/

.vacaManage .calcDialog .deptSelect .el-form-item__content {
  width: calc(100% - 120px);
}

.vacaManage .el-radio-button__inner:hover {
  color: #333;
}
.vacaManage .halo-tree .label {
  margin-left: 0px;
}

.vacaManage .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}

.vacaManage .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.vacaManage .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
}

/*i*/

.vacaManage
  .el-menu--collapse
  > .el-submenu
  > .el-submenu__title
  [class^='el-icon-'] {
  margin: 0;
  vertical-align: middle;
  width: 14px;
  text-align: center;
}

.vacaManage .el-input-group--append .el-input__inner,
.vacaManage .el-input-group__prepend {
  border-width: 1px 0px 1px 1px;
}

.vacaManage .el-input-group__append .el-button[data-v-4fefba28] {
  border: 1px solid #1ab394;
  border-radius: 0px 3px 3px 0px;
  line-height: 0.99;
}

/*table*/

.vacaManage .el-table {
  border: none !important;
}

.vacaManage .el-table th {
  background: #fff !important;
  height: 52px !important;
  vertical-align: left !important;
}

.vacaManage .el-table__footer-wrapper thead div,
.vacaManage .el-table__header-wrapper thead div {
  background: #fff !important;
  border-right: none;
}

.vacaManage .el-table .cell {
  padding: 10px;
  cursor: pointer;
}

.vacaManage .el-table .cell > div {
  text-align: center;
}

.vacaManage .el-table__body-wrapper {
  overflow: auto !important;
}

.vacaManage .el-table .cell,
.vacaManage .el-table th > div {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.vacaManage .ibox-tools dh {
  background: red;
  display: inline-block;
}

.vacaManage .el-tag--success {
  margin-top: 3px;
}

.vacaManage .btn-primary:hover,
.vacaManage .btn-primary:focus {
  background-color: #18a689 !important;
}

.vacaManage .btn-default:hover {
  background-color: #e6e6e6 !important;
  cursor: pointer;
  border: 1px solid #d2d2d2 !important;
}

.vacaManage .el-form .el-form-item {
  width: 80%;
}
.vacaManage .calcDialog .el-form .el-form-item {
  width: 46%;
}
.vacaManage .calcDialog .el-form .el-form-item.deptSelect {
  width: 40%;
}
.vacaManage .calcDialog .el-form .el-form-item.deptSelect1 {
  width: 20%;
}
.vacaManage .calcDialog .el-form .el-form-item.deptSelect2 {
  width: 30%;
}
.vacaManage .calcDialog .dialog-footer {
  text-align: center;
  line-height: 70px;
  height: 49px;
}

.vacaManage .el-form .el-select {
  width: 100%;
}
.vacaManage .calcDialog .el-form .el-select {
  width: 100%;
}
.vacaManage .calcDialog .el-form .el-select .el-input {
  width: 100%;
}
.vacaManage .el-table__empty-block {
  width: 100% !important;
}
.vacaManage .el-table::after {
  width: 0px;
}
.vacaManage .upload-con {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  height: 44px;
  overflow: hidden;
}
.vacaManage .upload-con button {
  display: inline-block;
  height: 44px;
  line-height: 44px;
  text-align: center;
  vertical-align: top;
  font-size: 14px;
}
.vacaManage .upload-con button span {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  text-align: center;
  vertical-align: top;
  font-size: 14px;
}
.vacaManage .el-table__header {
  width: 100% !important;
}
.vacaManage .el-date-editor.el-input {
  width: 120px;
}
.vacaManage .calcDialog .el-date-editor.el-input {
  width: 100%;
}
.vacaManage .calcDialog .el-input {
  width: 100%;
}
/*.vacaManage .calcDialog .el-form{
	padding-left:20%;
	width:60%;

}*/
.vacaManage .calcDialog .el-form {
}
.vacaManage .calcDialog .el-tag {
  margin-right: 5px;
}
.vacaManage .calcDialog .deptSearchIcon {
  height: 24px;
  background: #20a0ff;
  color: #fff;
  width: 50px;
  border-radius: 5px;
  line-height: 24px;
  text-align: center;
}

.vacaManage .halo-tree > ul:first-child > li:first-child:before {
  content: none;
  border-left: 0px solid #50bfff;
  width: 0px;
}

.vacaManage .halo-tree > ul:first-child > li:first-child::after {
  border-top: none;
}
</style>
